<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <title>Arduino Day！我有话要说！-DF创客社区</title>
 <meta name="keywords" content="Arduino、Arduino Day、开源硬件、DFRobot、DF创客社区、UNO、创客、开发者、社区、自造者">

    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/vue-2.4.2.min.js"></script>
    <script>
      document.documentElement.style.fontSize = 100 * innerWidth / 750 + 'px'
      addEventListener('load', function() {
        setTimeout(function(){
          document.documentElement.style.fontSize = 100 * innerWidth / 750 + 'px'
          window.unit = 100 * innerWidth / 750;
          var e = document.createEvent('Event');
          e.initEvent('adjustReady', true, true);
          window.dispatchEvent(e);
        }, 480);
      })
      addEventListener('orientationchange', function() {
        setTimeout(function(){
          document.documentElement.style.fontSize = 100 * innerWidth / 750 + 'px'
        }, 480)
      });
    </script>
    <style>
      *{margin: 0;padding: 0;font-family: sans-serif;}
      body{background: #FAF7F5;width: 100%;}
      ul,li{list-style: none;}
      #app{width: 7.5rem;overflow: hidden;}
      .container{width: 7.5rem;}
      .step_1{width: 7.5rem;}
      .step_1 .banner{width: 7.5rem;}
      .step_1 .banner img{width: 7.5rem;}
      .step_1 .from{width: 7.5rem;padding: 0.14rem 0.83rem;}
      .step_1 .from .lable{width: 5.84rem;font-size: 0.27rem;padding: 0.23rem 0 0.1rem 0;color: #AF8B6B;line-height: 0.38rem;}
      .step_1 .from .lable span{font-size: 0.18rem;}
      .step_1 .from .input{width: 5.84rem;height: 0.57rem;border: 1px solid #AF8B6B;overflow: hidden;}
      .step_1 .from .input input{width: 5.42rem;height: 0.57rem;border: none;padding: 0 0.21rem;outline: none;float: left;}
      .step_1 .from .textarea{width: 5.42rem;height: 1.28rem;border: 1px solid #AF8B6B;overflow: hidden;padding: 0.13rem 0.21rem;background: #FFFFFF;}
      .step_1 .from .textarea textarea{width: 100%;height: 100%;outline: none;border: none;}
      .step_1 .from .lable2{width: 5.84rem;font-size: 0.28rem;padding: 0.53rem 0 0.1rem 0;color: #AF8B6B;line-height: 0.38rem;}
      .step_1 .from .prdList{width: 7.5rem;}
      .step_1 .from .prdList ul{width: 5.84rem;display:flex;flex-wrap: wrap;}
      .step_1 .from .prdList ul li{list-style: none;width: 1.35rem;height: 1.35rem;margin-right: 0.14rem;margin-bottom: 0.56rem;position: relative;}
      .step_1 .from .prdList ul li img{width: 100%;float: left;}
      .step_1 .from .prdList ul li span{font-size: 0.2rem;color: #AF8B6B;display: block;text-align: center;width: 1.35rem;line-height: 0.38rem;}
      .step_1 .from .prdList ul li:nth-child(4n+4){margin-right: 0;}
      .step_1 .from .prdList ul li .border{border: 0.01rem solid #AF8B6B;display: block;position: absolute;z-index: 1;top: 0;left: 0;width: 1.34rem;height: 1.34rem;}
      .step_1 .from .prdList ul li .selectBorder{border: 0.05rem solid #AF8B6B;display: none;position: absolute;z-index: 1;top: 0;left: 0;width: 1.28rem;height: 1.28rem;}
      .step_1 .from .prdList ul .select .selectBorder{display: block;}
      .step_1 .from .stars{width: 5.84rem;}
      .step_1 .from .stars ul{width: 5.84rem;}
      .step_1 .from .stars ul li{margin: 0.25rem 0;height: 0.44rem;line-height: 0.44rem;}
      .step_1 .from .stars ul li span{display: block;float: left;font-size: 0.28rem;margin-right: 0.3rem;height: 0.44rem;line-height: 0.44rem;color: #AF8B6B;}
      .step_1 .from .stars ul li b{display: block;float: left;font-size: 0.44rem;height: 0.44rem;line-height: 0.4rem;font-family: serif;color: #AF8B6B;margin-right: 0.24rem;}
      .step_1 .button{width: 5.84rem;height: 0.84rem;margin: 0.71rem 0.83rem 0.8rem 0.83rem;}
      .step_1 .button button{width: 5.84rem;height: 0.84rem;border-radius: 0.2rem;background: #AF8B6B;border: none;font-size: 0.3rem;color: #FFFFFF;}
      .step_1 .button .destroy{width: 5.84rem;height: 0.84rem;border-radius: 0.2rem;background: rgb(167, 167, 167);border: none;font-size: 0.3rem;color: #FFFFFF;}
      .shareImg{z-index: 6;opacity: 0;position: absolute;top: 0;width: 7.5rem;left: 0;}
      .shareImg img{width: 100%;}
      .step_2{background: url(assets/bg.png) no-repeat;background-size: 100%;background-position: bottom;opacity: 0;}
      .step_2 .con{padding: 0 0.62rem;}
      .step_2 .banner{width: 7.5rem;}
      .step_2 .banner img{width: 7.5rem;}
      .step_2 .con .msg{padding: 0.33rem 0 0.1rem 0;font-size: 0.43rem;color: #AF8B6B;font-weight: bold;line-height: 0.5rem;height: 1.5rem;word-break: break-all;}
      .step_2 .con .name{text-align: right;font-size: 0.35rem;padding-bottom: 0.8rem;color: #AF8B6B;font-weight: bold;}
      .step_2 .con .yearText{font-size: 0.3rem;color: #AF8B6B;text-align: center;line-height: 0.48rem;margin-bottom: 0.22px;}
      .step_2 .con .project{font-size: 0.35rem;color: #AF8B6B;font-weight: bold;margin: 0.21rem 0 0.51rem 0;text-align: center;}
      .step_2 .con hr{border: none;border-top: 1px dashed #AF8B6B;margin-bottom: 0.2rem;}
      .step_2 .con .recommend{margin: 0.17rem 0 0.2rem 0;font-size: 0.3rem;color: #AF8B6B;}
      .step_2 .con .imageBox{margin: 0.5rem 0 0.2rem;height: 3rem;}
      .step_2 .con .imageBox .productImg{width: 2.4rem;height: 2.4rem;border: 1px solid #AF8B6B;float: left;margin-right: 0.85rem;}
      .step_2 .con .imageBox .productImg img{width: 100%;}
      .step_2 .con .imageBox .ability{width: 2.4rem;height: 2.4rem;float: left;position: relative;}
      .step_2 .con .imageBox .ability canvas{position: absolute;}
      .step_2 .con .code{padding: 0.5rem 0 0.3rem;text-align: right;}
      .step_2 .con .code img{width: 2.5rem;}
      .qrcodeBox{position: fixed;bottom: 0;left: 0;width: 7.5rem;height: 0.97rem;font-size: 0.3rem;color: #000000;text-align: center;line-height: 0.97rem;background: #FFFFFF;}
    </style>
</head>

<body>
<div id="app">
    <div class="container">
      <div class="step_1" v-if="stup == 'stup_1'">
        <div class="banner">
          <img src="assets\banner.png" alt="banner">
        </div>
        <div class="from">
          <div class="lable">
            我的名字<span>(24个字符以内)</span>
          </div>
          <div class="input">
            <input value="" type="text" v-model="name">
          </div>
          <div class="lable">
            知道Arduino是在哪一年？<span>(填写数字年份)</span>
          </div>
          <div class="input">
            <input value="" type="text" v-model="year">
          </div>
          <div class="lable">
            我用Arduino做过最满意的项目是？<span>(24个字符以内)</span>
          </div>
          <div class="input">
            <input value="" type="text" v-model="projectName">
          </div>
          <div class="lable2">
            Arduino Day！我有话要说！<span>(80个字符以内)</span>
          </div>
          <div class="textarea">
            <textarea v-model="message"></textarea>
          </div>
          <div class="lable2">
            我最推荐的Arduino系列开发板是：
          </div>
          <div class="prdList">
            <ul>
              <li :class="[b.select==true?'select':'']" v-for="(b , bi) in board" @click="selectBoard(bi);">
                <div class="selectBorder"></div>
                <div class="border"></div>
                <img :src="b.img" :alt="b.alt">
                <span>{{b.name}}</span>
              </li>
            </ul>
          </div>
          <div class="lable2">
            评价你推荐的Arduino系列开发板:
          </div>
          <div class="stars">
            <ul>
              <li v-for="(s , si) in ability">
                <span>{{s.name}}</span>
                <template v-for="index of 5">
                  <b v-if="s.num >= index" @click="changeStar(si,index);">★</b>
                  <b v-if="s.num < index" @click="changeStar(si,index);">☆</b>
                </template>                
              </li>
            </ul>
          </div>
        </div>
        <div class="button">
          <button class="destroy" v-if="!canPost">生成你的Arduino档案</button>
          <button @click="stup_2();" v-if="canPost">生成你的Arduino档案</button>
        </div>
      </div>

      <div class="step_2" v-if="stup == 'stup_2'">
        <div class="banner">
          <img src="assets\banner.png" alt="banner">
        </div>
        <div class="con">
          <div class="msg">
            “{{message}}”
          </div>
          <div class="name">
            ——{{name}}
          </div>
          <div class="yearText">
            {{year}}年我知道了Arduino</br>
            至今为止，它帮我实现了许多奇妙的想法</br>
            其中我最满意的项目是
          </div>
          <div class="project">
            {{projectName}}
          </div>
          <hr></hr>
          <div class="recommend">
            我最推荐的Arduino系列开发板是：<b>{{model}}</b>
          </div>
          <div class="imageBox">
            <div class="productImg">
              <img :src="modelImg" alt="productImg">
            </div>
            <div class="ability" id="ability">
            </div>
          </div>
          <div class="code">
            <img src="assets\code.png" alt="code">
          </div>
        </div>
      </div>

    </div>
    <div class="qrcodeBox" v-if="saveImg">
        <p class="tip" data-html2canvas-ignore v-show="!afterCanvasImageHide">长按保存图片</p>
    </div>
    <!--生成的图片的存放容器-->
    <div class="shareImg" id="shareImg"></div>
</div>

<script>

  /**
  * 动态加载JS
  * @param {string} url 脚本地址
  * @param {function} callback  回调函数
  */
  function dynamicLoadJs(url, callback) {
      var head = document.getElementsByTagName('head')[0];
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = url;
      if(typeof(callback)=='function'){
          script.onload = script.onreadystatechange = function () {
              if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete"){
                  callback();
                  script.onload = script.onreadystatechange = null;
              }
          };
      }
      head.appendChild(script);
  }

  var vm = new Vue({
    el: '#app',
    data: function() {
      return {
        afterCanvasImageHide: true,
        showToast: false,
        saveImg : false,
        stup : "stup_1",
        name : '',
        year : '',
        projectName : '',
        message : '',
        model : '',
        modelImg :  '',
        canPost : false,
        board : [
          {img:'assets/due.png',name:'Due',alt:'boardImage',select:false},
          {img:'assets/uno.png',name:'Uno',alt:'boardImage',select:false},
          {img:'assets/leonardo.png',name:'Leonardo',alt:'boardImage',select:false},
          {img:'assets/yun.png',name:'YUN',alt:'boardImage',select:false},
          {img:'assets/mini.png',name:'Mini',alt:'boardImage',select:false},
          {img:'assets/nano.png',name:'Nano',alt:'boardImage',select:false},
          {img:'assets/micro.png',name:'Micro',alt:'boardImage',select:false},
          {img:'assets/mega.png',name:'Mega',alt:'boardImage',select:false}
        ],
        ability : {
          size : {num:1,name:"尺寸"},
          price : {num:1,name:"价格"},
          performance : {num:1,name:"性能"},
          interface : {num:1,name:"接口"},
          threshold : {num:1,name:"门槛"},
          compatible : {num:1,name:"兼容"}
        }
      };
    },
    watch: {
      name(newStr, oldStr) {
        var _this = this;
        var trueStr = _this.interceptStr(newStr,24);
        _this.name = trueStr;
        _this.check();
      },
      year(newStr, oldStr) {
        var _this = this;
        var trueStr = _this.interceptStr(newStr,4);
        _this.year = trueStr;
        _this.check();
      },
      projectName(newStr, oldStr) {
        var _this = this;
        var trueStr = _this.interceptStr(newStr,24);
        _this.projectName = trueStr;
        _this.check();
      },
      message(newStr, oldStr) {
        var _this = this;
        var trueStr = _this.interceptStr(newStr,80);
        _this.message = trueStr;
        _this.check();
      },
      model(){
        var _this = this;
        _this.check();
      }
    },
    methods: {
      changeStar : function(key,num){
        var _this = this;
        var data = _this.ability[key];
        data.num = num;
      },
      check : function(){
        var _this = this;
        var result = true;
        if(_this.name == ""){
          result = false;
        }
        if(_this.year == ""){
          result = false;
        }
        if(_this.projectName == ""){
          result = false;
        }
        if(_this.message == ""){
          result = false;
        }
        if(_this.model == ""){
          result = false;
        }
        _this.canPost = result; 
      },
      stup_2 : function(){
        var _this = this;
        var result = true;
        if(_this.name == ""){
          result = false;
        }
        if(_this.year == ""){
          result = false;
        }
        if(_this.projectName == ""){
          result = false;
        }
        if(_this.message == ""){
          result = false;
        }
        if(_this.model == ""){
          result = false;
        }
        if(result){
          _this.sendData(function(){
            _this.stup = "stup_2";
            _this.$nextTick(function(){
              dynamicLoadJs('js/flexible.js',function(){
                dynamicLoadJs('js/html2canvas.js',function(){
                  document.documentElement.style.fontSize = 100 * innerWidth / 750 + 'px'
                  setTimeout(function(){
                    document.documentElement.style.fontSize = 100 * innerWidth / 750 + 'px'
                    window.unit = 100 * innerWidth / 750;
                    var e = document.createEvent('Event');
                    e.initEvent('adjustReady', true, true);
						$(".step_2").css({"opacity":1});
					  _this.generateImage();
					  _this.setAbility();
                    window.dispatchEvent(e);
                  }, 100);
                });
              });              
            });
          });
        }
      },
      getStrLength : function(str){
        return str.replace(/[\u0391-\uFFE5]/g,"aa").length;
      },
      interceptStr : function(str,leg){
        var _this = this;
        var trueLeg;
        var result = '';
        var nowLeg = 0;
        if(str == undefined || str == "" || str == null){
          return result;
        }
        trueLeg = _this.getStrLength(str);        
        if(trueLeg <= leg){
          result = str;
        }else{
          for(var k in str){
            if(nowLeg < leg){
              nowLeg = nowLeg + _this.getStrLength(str[k]);
              result = result + str[k];
            }else{
              result = result + "";
              break;
            }
          }
        }
        return result;
      },
      selectBoard : function(index){
        var _this = this;
        for(var k in _this.board){
          var d = _this.board[k];
          if(k == index){
            d.select = true;
            _this.model = d.name;
            _this.modelImg = d.img;
          }else{
            d.select = false;
          }
        }
      },
      sendData : function(fun){
        var _this = this;
        var ajaxUrl = 'http://118.25.2.186:8099/api/advertising_share/add' + '?timestap='+new Date().getTime();
        var model = '';
        var extend = {};

        extend.projectName = _this.projectName;
        extend.ability = _this.extend;

        $.ajax({
          url: ajaxUrl,
          type: 'post',
          dataType: 'json',
          data : {
            name : _this.name,
            year : _this.year,
            words : _this.message,
            model_number : _this.model,
            extend : extend
          },
          beforeSend: function() {
          },
          complete: function() {
          },
          success: function(result) {
            fun();
          },
          error: function(xhr, ajaxOptions, thrownError) {
            alert("网络错误")
          }
        });

      },
      /**
       * 根据 window.devicePixelRatio 获取像素比
       * @returns {number}
       * @constructor
       */
      getDpr: function() {
        if (window.devicePixelRatio && window.devicePixelRatio > 1) {
          return window.devicePixelRatio;
        }
        return 1;
      },

      /**
       * 将传入值转为整数
       * @param value
       * @returns {number}
       */
      parseValue: function(value) {
        return parseInt(value, 10);
      },

      // 将图片转为base64格式
      img2base64: function(url, crossOrigin) {
        return new Promise(resolve => {
          const img = new Image();

          img.onload = () => {
            const c = document.createElement('canvas');

            c.width = img.naturalWidth;
            c.height = img.naturalHeight;

            const cxt = c.getContext('2d');

            cxt.drawImage(img, 0, 0);

            // 得到图片的base64编码数据
            resolve(c.toDataURL('image/png'));
          };

          // 结合合适的CORS响应头，实现在画布中使用跨域<img>元素的图像
          crossOrigin && img.setAttribute('crossOrigin', crossOrigin);
          img.src = url;
        });
      },

      /**
       * 生成图片
       */
      generateImage: function() {
        var _this = this;

        // var scanTextElem = document.getElementById('scanText');
        // scanTextElem.style.opacity = '1';

        // 获取想要转换的dom节点
        // var dom = document.querySelector('body');
        var dom = document.getElementById('app');
        var box = window.getComputedStyle(dom);

        // dom节点计算后宽高
        var width = _this.parseValue(box.width);
        var height = _this.parseValue(box.height);

        // 获取像素比
        var scaleBy = _this.getDpr();

        // 创建自定义的canvas元素
        var canvas = document.createElement('canvas');

        // 设置canvas元素属性宽高为 DOM 节点宽高 * 像素比
        canvas.width = width * scaleBy;
        canvas.height = height * scaleBy;

        // 设置canvas css 宽高为DOM节点宽高
        canvas.style.width = width + 'px';
        canvas.style.height = height + 'px';

        // 获取画笔
        var context = canvas.getContext('2d');

        // 将所有绘制内容放大像素比倍
        context.scale(scaleBy, scaleBy);

        // 设置需要生成的图片的大小，不限于可视区域（即可保存长图）
        var w = document.getElementById('app').style.width;
        var h = document.getElementById('app').style.height;

        html2canvas(dom, {
          allowTaint: true,
          width: w,
          height: h,
          useCORS: true
        }).then(function(canvas) {
          // 将canvas转换成图片渲染到页面上
          var url = canvas.toDataURL('image/png');// base64数据
          var image = new Image();
          image.src = url;
          document.getElementById('shareImg').appendChild(image);

          _this.afterCanvasImageHide = false;
          _this.saveImg = true;
          // scanTextElem.style.opacity = '0';

          _this.showToast = true;
          setTimeout(function() {
            _this.showToast = false;
          }, 1000);
        });
      },

      setAbility : function(){
        var _this = this;
        var obj = $("#ability");
        var canvasWidth = obj.width() * 1.85;
        var leftNum = (canvasWidth - obj.width())/2;
        var mW = canvasWidth;
        var mH = canvasWidth;
        var mData = [
        ];
        for(var mk in _this.ability){
          var ad = _this.ability[mk];
          var arr = [ad.name,ad.num*20];
          mData.push(arr);
        }
        var mCount = mData.length; //边数
        var mCenter = mW /2; //中心点
        var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)
        var mAngle = Math.PI * 2 / mCount; //角度
        var mCtx = null;
        var mColorPolygon = '#B8B8B8'; //多边形颜色
        var mColorLines = '#B8B8B8'; //顶点连线颜色
        var mColorText = '#000000';
        //初始化
        (function(){
            var canvas = document.createElement('canvas');
            document.getElementById("ability").appendChild(canvas); 
            canvas.height = mH;
            canvas.width = mW;
            canvas.style = 'left:-'+ leftNum +'px;top:-'+ leftNum +'px';
            mCtx = canvas.getContext('2d');
            drawPolygon(mCtx);
            drawLines(mCtx);
            drawRegion(mCtx);
            drawText(mCtx);
            drawCircle(mCtx);
            //drawLines1(mCtx)
        })();
    
        // 绘制多边形边
        function drawPolygon(ctx){
            ctx.save();    
            ctx.strokeStyle = mColorPolygon;
            var r = mRadius/ mCount; //单位半径
            // var r = mRadius/ (mCount-2); //单位半径  画三个五边形
            //画5个圈
            for(var i = 0; i < 5; i ++){
              // for(var i = 0; i < mCount-2; i ++){ // 画三个五边形
                ctx.beginPath();
                var currR = (mRadius/5) * ( i + 1); //当前半径
                //画5条边
                for(var j = 0; j < mCount; j ++){
                    var x = mCenter + currR * Math.cos(mAngle * j);
                    var y = mCenter + currR * Math.sin(mAngle * j);
                    ctx.lineWidth = 2;          //设置线宽状态
                    ctx.strokeStyle = '#AF8B6B';  //设置线的颜色状态
                    ctx.lineTo(x, y);
                }
                ctx.closePath()
                ctx.stroke();
            }
            ctx.restore();
        }
    
        //顶点连线
        function drawLines(ctx){
            ctx.save();
            ctx.beginPath();
            ctx.strokeStyle = mColorLines;
            for(var i = 0; i < mCount; i ++){
                var x = mCenter + mRadius * Math.cos(mAngle * i);
                var y = mCenter + mRadius * Math.sin(mAngle * i);
                ctx.lineWidth = 1;          //设置线宽状态
                ctx.strokeStyle = '#AF8B6B';  //设置线的颜色状态
                ctx.setLineDash([5, 8]);
                ctx.moveTo(mCenter, mCenter);
                ctx.lineTo(x, y);
            }
            ctx.stroke();
            ctx.restore();
        }
    
        //数据点之间的连线
        function drawLines1(ctx){
            ctx.save();
            ctx.beginPath();
            var count = 0;
            for(var i = 0; i < mCount; i ++){
                var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
                var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
                count = i + 1;
                if (count < mCount) {
                    var x1 = mCenter + mRadius * Math.cos(mAngle * (i+1)) * mData[i+1][1] / 100;
                    var y1 = mCenter + mRadius * Math.sin(mAngle * (i+1)) * mData[i+1][1] / 100;
                }else{
                    var x1 = mCenter + mRadius * Math.cos(mAngle * 0) * mData[0][1] / 100;
                    var y1 = mCenter + mRadius * Math.sin(mAngle * 0) * mData[0][1] / 100;
                }
                ctx.moveTo(x, y);
                ctx.lineTo(x1, y1);
                ctx.lineWidth = 2;          //设置线宽状态
                ctx.strokeStyle = '#AF8B6B';  //设置线的颜色状态
            }
            ctx.stroke();
            ctx.restore();
        }
        //绘制文本
        function drawText(ctx){
            ctx.save();
            var fontSize = mCenter / 10;
            ctx.font = fontSize + 'px Microsoft Yahei';
            ctx.fillStyle = mColorText;
            for(var i = 0; i < mCount; i ++){
                var x = mCenter + (mRadius+5) * Math.cos(mAngle * i) ;
                var y = mCenter + (mRadius+5) * Math.sin(mAngle * i);
                ctx.fillStyle = '#AF8B6B';
                if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){
                    ctx.fillText(mData[i][0], x, y + fontSize);
                }else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){
                    ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);
                }else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){
                    ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
                }else{
                    ctx.fillText(mData[i][0], x, y);
                }
            }
            //中心绘制文字
            // ctx.font="bold 36px Arial"
            // ctx.fillStyle='#1478FA'
            // ctx.fillText("75",mCenter-18,mCenter+16);
            // ctx.restore();
        }
    
        //绘制数据区域
        function drawRegion(ctx){
            ctx.save();
            ctx.beginPath();
            for(var i = 0; i < mCount; i ++){
                var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
                var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
                ctx.lineTo(x, y);
            }
            ctx.closePath();
            ctx.fillStyle = 'rgba(175, 139, 107, 0.5)';
            ctx.fill();
            ctx.restore();
        }
    
        //画点
        function drawCircle(ctx){
            ctx.save();    
            var r = mCenter / 30;
            for(var i = 0; i < mCount; i ++){
                var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
                var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
    
                ctx.beginPath();
                ctx.arc(x, y, r, 0, Math.PI * 2);
                ctx.fillStyle = '#AF8B6B';
                ctx.fill();
            }
            ctx.restore();
        }
      }
    }
  });
</script>
</body>
</html>